<template>
  <div>
    <a-modal
      v-if="meetInfo.joinStatus == 1"
      :maskClosable="false"
      :keyboard="false"
      :closable="false"
      v-model="visible"
      title="参会回执"
      @ok="handleOk"
    >
      <template slot="footer">
        <a-button type="primary" key="back" :loading="loading1" @click="handleCancel">
          无法参会
        </a-button>
        <a-button key="submit" type="primary" :loading="loading2" @click="handleOk">
          确认参会
        </a-button>
      </template>
      <div>
        <p>{{ meetInfo.memberName }} {{ getSex(meetInfo.sex) }}</p>
        <p class="content">
          您于被邀请参与{{ moment(meetInfo.meetingDate).format('YYYY年MM月DD日')
          }}{{ `${meetInfo.meetingBeginTime}-${meetInfo.meetingEndTime}` }}由{{ meetInfo.createUserName }}发起的{{
            meetInfo.meetingTitle
          }}，请您确认是否准时参会。
        </p>
      </div>
    </a-modal>
    <a-modal
      v-else
      :maskClosable="false"
      :keyboard="false"
      :closable="false"
      v-model="visibleResult"
      title="参会回执"
      :footer="null"
    >
      <div v-if="!msg.length && (meetInfo.joinStatus == 2 || meetInfo.joinStatus == 3)">
        <p>{{ meetInfo.memberName }} {{ getSex(meetInfo.sex) }}</p>
        <p class="content">您已{{ meetInfo.joinStatus == 2 ? '确认' : '确认无法' }}参会。</p>
      </div>
      <div class="errInfo" v-else-if="msg.length">{{ msg }}</div>
      <div class="spin" v-else>
        <a-spin :spinning="spinning" tip="Loading...">
          <div class="spin-content"></div>
        </a-spin>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { meetConfirm, getApplyInfo } from '@/api/meet'
import moment from 'moment'
export default {
  name: 'Register',
  data () {
    return {
      visible: true,
      loading1: false,
      loading2: false,
      params: {},
      meetInfo: {},
      visibleResult: true,
      msg: '',
      spinning: true
    }
  },
  created () {
    this.params = this.$route.query
  },
  mounted () {
    this.getApplyInfo()
  },
  methods: {
    moment,
    handleCancel () {
      this.loading1 = true
      this.meetConfirm(3)
    },
    handleOk () {
      this.loading2 = true
      this.meetConfirm(2)
    },

    // 获取预约信息
    getApplyInfo () {
      getApplyInfo(this.params)
        .then(res => {
          this.spinning = false
          if (res.code === 0) {
            this.meetInfo = res.data
          } else {
            this.msg = res.msg
          }
        })
        .catch(() => {
          this.spinning = false
          this.msg = '出现故障,请稍后重试'
        })
    },

    // joinStatus 是否参会（1：待确认 2：确认参会 3：无法参会）
    meetConfirm (joinStatus) {
      let data = Object.assign({}, this.params, { joinStatus })
      meetConfirm(data)
        .then(res => {
          if (res.code === 0) {
            this.visible = false
            this.showMsg()
          } else {
            this.$message.warning(res.msg)
          }
        })
        .finally(() => {
          this.loading1 = false
          this.loading2 = false
        })
    },

    showMsg () {
      this.$success({
        title: '提示',
        content: '操作成功',
        class: 'success-msg',
        keyboard: false
      })
    },
    getSex (val) {
      let str = '：'
      if (val === 0) {
        str = '女士：'
      }
      if (val === 1) {
        str = '先生：'
      }
      return str
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-modal-header {
  text-align: center;
  .ant-modal-title {
    font-size: 16px;
    font-weight: 500;
  }
}
/deep/ .ant-modal-body {
  height: 200px;
}
/deep/ .ant-modal-footer {
  display: flex;
  justify-content: space-around;
}
.content {
  text-indent: 40px;
}
@media (max-width: 767px) {
  /deep/ .ant-modal {
    width: 80% !important;
  }
}
.errInfo {
  text-align: center;
  margin-top: 30px;
}
.spin {
  padding: 50px;
}
</style>
<style lang="less">
@media (max-width: 767px) {
  .success-msg {
    .ant-modal {
      width: 80% !important;
    }
  }
}

.success-msg .ant-btn {
  display: none;
}
</style>
